<!--
 * @Author: 智永风
 * @Date: 2024-12-11 09:25:45
 * @LastEditors: zhiyongfeng 18730312382@163.com
 * @LastEditTime: 2025-01-17 17:50:42
 * @FilePath: \zhlx-autoform-ui\src\components\form-designer\setting-panel\property-editor\bindSerialNum-editor.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by 智永风, All Rights Reserved. 
-->
<template>
  <el-form-item label="绑定流水号">
    <el-select
      v-model="optionModel.bindSerialNum"
      default-first-option
      filterable
      clearable
      @change="bindSerialChange"
    >
      <el-option
        v-for="item in serialNumList"
        :key="item.turnoverCode"
        :label="item.flowingWaterName"
        :value="item.turnoverCode"
      >
      <!-- <span>{{ item.name }}</span> -->
        <div style="float: left">
          <el-tooltip
            class="box-item"
            effect="dark"
            :enterable="false"
            :content="item.flowingWaterName"
            placement="top-start"
          >
            <span>{{ item.flowingWaterName.length > 10 ? item.flowingWaterName.slice(0, 10) + '...' : item.flowingWaterName }}</span>
          </el-tooltip>
        </div>
        <span
          style="
            float: right;
            color: var(--el-text-color-secondary);
            font-size: 13px;
          "
        >
          {{ item.modelType == "0" ? "简单模式" : "高级模式" }}
        </span>
        </el-option
      >
    </el-select>
  </el-form-item>
  <!-- <serial-number ref="serialNumberRef" :title="title" @confirm="saveDataForm"></serial-number> -->
</template>

<script>
import i18n from "@/utils/i18n"
import propertyMixin from "@/components/form-designer/setting-panel/property-editor/propertyMixin"
import { getAuthSerialNumAPI } from "@/api/document/serial"
// import serialNumber from "@/components/ZHLX-Components/ZHLX-serialNumber/index.vue";

export default {
  name: "bindSerialNum-editor",
  mixins: [i18n, propertyMixin],
  // components: {
  //   serialNumber,
  // },
  props: {
    designer: Object,
    selectedWidget: Object,
    optionModel: Object,
  },
  data() {
    return {
      title: "流水号管理",
      dataForm: {
        serialNumber: "", //流水号
        showPrefix: false, //是否展示前缀
        prefix: "", //前缀
        dateRule: "", //年号规则
        endSymbol: "", //结束符
        initialValue: "", //起始值
        digit: "", //位数
        isFixedLength: false, //是否固定长度显示
        showSuffix: false, //是否展示后缀
        suffix: "", //后缀
        resetRule: "", //重置规则
        // defaultValue: '', //预览内容
      },
      serialNumList: [],
    }
  },
  mounted() {
    this.getSerialNumList()
  },
  methods: {
    getSerialNumList() {
      getAuthSerialNumAPI()
        .then((res) => {
          if (res.ok) {
            this.serialNumList = res.data
          }
        })
        .catch((err) => {
          this.$message.error(err.msg || "请求失败")
        })
    },
    // 获取绑定的流水号规则模式
    bindSerialChange(value) {
      let serialObj = this.serialNumList.find((item) => item.turnoverCode == value)
      this.optionModel.bindSerialModelType = serialObj.modelType
    },
    /**
     * 打开弹窗
     */
    handleOpenDialog() {
      this.dataForm.defaultValue = this.optionModel.defaultValue
      this.$refs.serialNumberRef.init(this.dataForm)
    },
    /**
     * 保存表单
     */
    saveDataForm(form) {
      console.log("form-----", form)
      this.dataForm = form
      this.optionModel.bindSerialNum = form.defaultValue
    },
  },
}
</script>

<style scoped></style>
